<template>
	<view class="cate-view">
		<!-- 搜索bar -->
		<SearchNav></SearchNav>
		<!-- 分类选择区域 -->
		<view class="selectView">
			<!-- 左侧滑动区域 -->
			<scroll-view scroll-y class="leftSelect">
				<!-- 一级分类 -->
				<view class="nav-slide">
					<view class="item van-ellipsis" @click="activeIndex = index" :class="{ active: activeIndex === index }" v-for="item, index in cateData" :key="item.categoryId">{{ item.categoryName }}</view>
				</view>
			</scroll-view>
			<!-- 右侧滑动区域 -->
			<scroll-view scroll-y class="rightSelect" v-if="cateData[activeIndex]">
				<!-- 二级分类 -->
				<view class="cate-item" v-for="item in cateData[activeIndex].secondLevelCategoryVOS" :key="item.categoryId">
					<!-- 二级标题 -->
					<view class="cate-item-title">{{ item.categoryName }}</view>
					<!-- 三级分类 -->
					<view class="cate-sub">
						<view class="cate-sub-item" v-for="item2 in item.thirdLevelCategoryVOS" :key="item2.categoryId" @click="goSearch(item2)">
							<image src="https://s.weituibao.com/1583591077131/%E5%88%86%E7%B1%BB.png" mode=""></image>
							<view>{{ item2.categoryName }}</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script setup>
import SearchNav from '../../components/SearchNav/SearchNav.vue';
import { onMounted, reactive, toRefs } from "vue";
import { getCategory } from '../../api/modules/cate';
const state = reactive({ cateData: [], activeIndex: 0 })

onMounted(async () => {
	// 1. 获取分类数据
	const { data } = await getCategory()
	// 2. 保存分类数据
	console.log(data);
	state.cateData = data
	
})

// 前往搜索页
const goSearch = (item) => {
	uni.navigateTo({ url: `/subpkg/search/search?cateId=${item.categoryId}&cateName=${item.categoryName}` })
}

const { cateData, activeIndex } = toRefs(state)
</script>

<style lang="scss">
.selectView {
	height: calc(100vh - 94rpx);
	display: flex;
	.leftSelect {
		::-webkit-scrollbar {
			display: none;
		}
		width: 30%;
		height: 100%;
		background-color: #f8f8f8;
		.nav-slide {
			.item {
				height: 112rpx;
				text-align: center;
				line-height: 112rpx;
				font-size: 28rpx;
				&.active {
					background-color: #FFF;
					color: $pc;
				}
			}
		}
	}
	.rightSelect {
		width: 70%;
		height: 100%;
		padding: 0 20rpx;
		box-sizing: border-box;
		background-color: #fff;
		::-webkit-scrollbar {
			display: none;
		}
		.cate-item {
			.cate-item-title {
				font-size: 30rpx;
				font-weight: 500;
				padding: 40rpx 0;
			}
			.cate-sub {
				display: flex;
				flex-wrap: wrap;
				.cate-sub-item {
					display: flex;
					flex-direction: column;
					align-items: center;
					width: 33.3333%;
					margin-bottom: 20rpx;
					font-size: 30rpx;
					text-align: center;
					image {
						width: 60rpx;
						height: 60rpx;
					}
				}
			}
		}
		
	}
}
</style>
